<template>
  <div class="cmd-wrapper wrapper">
    <div v-for="(sub, i) in cmdArray" :key="i" class="line">
      <span class="number" v-if="!i">$ </span>
      <span class="gap" v-if="i"></span>
      <span v-for="(item, j) in sub" :key="j" :class="[item.className, theme]">
        {{ item.word }}</span
      >
    </div>

    <div class="cmd-btns">
      <button class="ins-btn" :class="`${theme}-bg-ft`" @click="handleCopy">
        复制
      </button>
      <button class="ins-btn" :class="`${theme}-bg-ft`" @click="handleRemove">
        移除
      </button>
      <button class="ins-btn" :class="`${theme}-bg-ft`" @click="handleModify">
        修改
      </button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    content: Object,
    number: Number,
    theme: String
  },
  data () {
    return {
      originArray: [],
      cmdArray: [[]]
    }
  },
  methods: {
    handleCopy () {
      var writeClipBoard = (text) => {
        navigator.clipboard
          .writeText(text)
          .then(() => {
            console.log('Text copied.')
          })
          .catch(() => {
            console.log('Failed to copy text.')
          })
      }
      writeClipBoard(this.content.data)
    },
    handleRemove () {
      this.$emit('removeCommand', {
        uuid: this.content.uuid
      })
    },
    handleModify () {
      this.$emit('modifyCommand', {
        uuid: this.content.uuid
      })
    }
  },
  created () {
    let counter = 0
    this.originArray = this.content.data.trim().split(/\s+/)
    this.originArray.forEach((ele, index) => {
      if (index === 0) {
        this.cmdArray[counter].push({ className: 'cmd', word: ele, rowAt: counter })
      } else if (ele.startsWith('-')) {
        this.cmdArray[counter].push({ className: 'param', word: ele, rowAt: counter })
      } else if (ele.startsWith('http://') || ele.startsWith('https://')) {
        this.cmdArray[counter].push({ className: 'link', word: ele, rowAt: counter })
      } else if (ele.startsWith('\\')) {
        this.cmdArray[counter].push({ className: 'slash', word: ele, rowAt: counter })
        counter += 1
        this.cmdArray.push([])
      } else {
        this.cmdArray[counter].push({ className: 'obj', word: ele, rowAt: counter })
      }
    })
  }
}
</script>

<style lang="scss" scoped>
@import "../style/theme";
/* Command Line Starts */
span {
  font-size: 28px;
  margin-right: 14px;
}
.cmd-wrapper {
  position: relative;
}
.cmd-btns {
  margin-top: 7px;
  position: absolute;
  top: 0;
  right: 42px;
}

.ins-btn {
  text-decoration: underline;
  padding: 0 6px;
  outline: none;
  border: none;
  cursor: pointer;
  font-size: 17px;
  opacity: 0.1;
  &:hover {
    opacity: 1;
  }
}
.line {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.line:last-child {
  margin-left: auto;
}

.gap {
  content: "";
  width: 72px;
}
// Theme Colors Defined Here.
.cmd {
  &.light {
    color: $light-cmd;
  }
  &.dark {
    color: $dark-cmd;
  }
}
.param {
  &.light {
    color: $light-param;
  }
  &.dark {
    color: $dark-param;
  }
}
.obj {
  &.light {
    color: $light-obj;
  }
  &.dark {
    color: $dark-obj;
  }
}
.link {
  text-decoration: underline;
  font-style: italic;
  &.light {
    color: $light-link;
  }
  &.dark {
    color: $dark-link;
  }
}
.slash {
  margin-left: auto;
  &.light {
    color: $light-slash;
  }
  &.dark {
    color: $dark-slash;
  }
}
// End.
</style>
